<template>
  <div class="mapList">
    <div class="titleBtn">
      <el-button type="success" @click="handleQuery">查询</el-button>
      <el-button @click="resetTime">重置</el-button>
    </div>
    <div class="searchParameter">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        label-width="68px"
        size="small"
      >
        <el-form-item label="预警类型" prop="name1">
          <el-select size="mini" v-model="queryParams.value1" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            size="mini"
            v-model="timeData"
            :clearable="false"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="listContent">
      <div class="item" v-for="item in 6" :key="item">
        <div class="name">
          <div class="fw pointer" @click="enterpriseInfo">测试俊园餐饮单位有限公司</div>
          <div>未处理</div>
        </div>
        <div class="info">
          <div class="infoItem">
            <div class="font_color_base">预警类型</div>
            <div>连接异常</div>
          </div>
          <div class="infoItem">
            <div class="font_color_base">开始时间</div>
            <div>2021/09/02 16:41:13</div>
          </div>
          <div class="infoItem">
            <div class="font_color_base">结束时间</div>
            <div>2021/09/02 16:41:13</div>
          </div>
        </div>
      </div>
    </div>
    <map-list-model ref="mapListModel"/>
  </div>
</template>

<script>
import { Mixin } from '@/utils/mixin/Mixin'
import MapListModel from '@/views/earlyWarning/earlyWarningMap/components/MapListModel'

export default {
  name: 'MapList',
  mixins: [Mixin],
  components: {
    MapListModel
  },
  data() {
    return {
      timeData: []
    }
  },
  watch: {
    timeData: {
      handler(val) {
        this.queryParams.startTime = val[0]
        this.queryParams.endTime = val[1]
      },
      deep: true
    }
  },
  created() {
    this.getCurrentHour()
  },
  methods: {
    getCurrentHour() {
      const startTime = this.$time.currentHour + ':00'
      const endTime = this.$time.currentHour + ':59'
      this.timeData = [startTime, endTime]
      this.queryParams.startTime = startTime
      this.queryParams.endTime = endTime
    },
    resetTime() {
      this.getCurrentHour()
      this.resetQuery()
    },
    enterpriseInfo() {
      this.$refs.mapListModel.showModel()
    }
  }
}
</script>

<style lang="scss" scoped>
.mapList {
  width: 100%;
  height: 100%;
  background: url("../../../../assets/images/earlyWarning/listBg.png") no-repeat;
  background-size: 100% 100%;
  padding: 20px;
  overflow: hidden;

  .titleBtn {
    padding: 10px 0;
    border-bottom: 2px solid #237CDF;
    margin-top: 10px;
  }

  .listContent {
    width: 100%;
    height: 75%;
    overflow: auto;
    padding: 0 10px;

    .item {
      width: 100%;
      height: 160px;
      background: #FFFFFF;
      border-radius: 10px;
      margin-bottom: 10px;
      padding: 10px;

      .name {
        position: relative;

        div:nth-child(1) {
          width: 190px;
        }

        div:nth-child(2) {
          padding: 5px 10px;
          background: #F7DADA;
          color: #BA2F39;
          border-radius: 15px;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(0, -50%);
        }
      }

      .info {
        margin-top: 10px;

        .infoItem {
          display: flex;
          justify-content: flex-start;
          line-height: 2;

          div:nth-child(1) {
            margin-right: 20px;
          }
        }
      }
    }
  }

  ::v-deep .el-form-item__label {
    color: #FFFFFF !important;
  }

  ::v-deep .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
    width: 100%;
  }

  ::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
}
</style>
